@charset "utf-8";
/**
 * Created by kroyo on 2018/03/26
 * requisition-detail  专利信息详情
 */


@import 'common/mixincommon';

.blue{
    color: $acolor;
}


//多选按钮组
.form-inner_checkbox {
    font-size: 0;
    li,.check-wrapper{
        position: relative;
        display: inline-block;
        font-size: 14px;
        margin-bottom: 20px;
        margin-left: 20px;
        &.checked{
            label{
                color: $sf;
                background: $acolor;
                &:hover{
                    color: $sf;
                }
            }
            .iconfont{
                display: block;
            }
        }
        .iconfont {
            display: none;
            position: absolute;
            right: -9px;
            top: -9px;
            width: 20px;
            height: 20px;
            line-height: 16px;
            color: $acolor;
            background: #fff;
            border: 2px solid #fff;
            border-radius: 50%;
        }
        label {
            display: inline-block;
            width: auto;
            height: auto;
            line-height: 1;
            padding: 8px 20px;
            border-radius: 4px;
            border: 1px solid $borcolor;
            @include transitions(.4s);
            &:hover {
                color: $acolor;
                border-color: $acolor;
                cursor: pointer;
            }
        }
        input[type="checkbox"] {
            display: none;
            opacity: 0;
        }
        input[type="text"] {
            width: 160px;
            height: 32px;
            border: 1px solid $borcolor;
            @include borradius(4px);
            padding: 0 10px;
        }
        .case-form-inner-none {
            color: $s3 !important;
            padding-left: 0;
            padding-right: 8px;
            border: none;
            background-color: transparent !important;
        }
    }
}








//需求状态
.demand-status{
    display: block;
    .view-icon{
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 38px;
        color: $acolor;
        font-size: 14px;
        border: 1px solid $acolor;
        @include borradius(50%);
        text-align: center;
        margin-right: 20px;
        vertical-align: middle;
    }
    //结构
    .conta-view{
        .view-icon{
            color: $yelow;
            border-color: $yelow;
        } 
        .status{
            color: $yelow;
        }  
    }
}



//需求单、订单详情样式
.detailview{
    .watchview{
        display: block;
    }
    .editview{
        display: none;
    }
    .editbtn{
        color: $acolor;
        font-size: 14px;
        margin-left: 20px;
        cursor: pointer;
        // text-decoration: underline;
        .iconfont{
            font-size: 14px;
            margin-right: 8px;
        }
    }
    .view-header{
        //下载合同
        .contactbtn{
            position: absolute;
            right: 0;
            color: $s6;
            font-size: 14px;
            text-decoration: underline;
            cursor: pointer;
            &:before{
                display: inline-block;
                content:'';
                width: 12px;
                height: 14px;
                background: url(../img/list/icon-contact.png) no-repeat center;
                vertical-align: -2px;
                margin-right: 10px;
            }
            &:hover{
                color: $acolor;
            }
        }
        p.width50{
            width: 50%;
        }
        p{
            width: 100%;
            margin-bottom: 20px;
            &:last-of-type{
                margin-bottom: 0;
            }
        }
        .tlabel{
            display: inline-block;
            width: auto;
            height: 20px;
            line-height: 20px;
            color: $sf;
            font-size: 12px;
            padding: 0 5px;
            background-color: #fea733;
            margin-left: 10px;
        }
        .editview{
            background-color: transparent;
            border: none;
            padding: 0;
            margin-top: 0;
            margin-bottom: 20px;
        }
        .btn-list{
            display: inline-block;
            margin-left: 20px;
        }
    }
    //需求方
    .data-item{
        .item-li{
            line-height: normal;
        }
        //需求备注
        .state{
            line-height: 26px;
        } 
        .text{
            max-width: 560px;
            span{
                margin-left: 20px;
            }
        }
        .editbtn{
            color: $acolor;
            font-size: 14px;
            margin-left: 20px;
            cursor: pointer;
            text-decoration: underline;
            .iconfont{
                font-size: 14px;
                margin-right: 10px;
            }
        }
        .editview{
            div.text{
                font-size: 0;
            }
            .case-form-inner_checkbox{
                color: $s6;
                font-size: 14px;
            }
        }
    }
    .li-file{
        .label{
            line-height: 40px;
        }
        .file{
            width: 560px;
            height: 40px;
            line-height: 40px;
            color: $s3;
            font-size: 14px;
            padding-left: 20px;
            padding-right: 20px;
            background-color: #eeeeee;
            margin-bottom: 20px;
            &:last-of-type{
                margin-bottom: 0;
            }
        }
        .file-name{
            float: left;
            max-width: 440px;
            @include textoverflow;
        }
        .downbtn{
            float: right;
            cursor: pointer;
            @include transitions(.4s);
            color: $s3;
            &:hover{
                color: $acolor;
            }
        }
        .iconfont{
            margin-right: 10px;
        }
    }
    //标签
    .item-label{
        .item-li{
            float: left;
            width: 50%;
            margin-left: 0;
            padding-left: 20px;
        }
        .text{
            max-width: 200px;
        }
    }
    //编辑状态的切换
    .view-header.edit,.data-item.edit{
        .watchview{
            display: none;
        }
        .editview{
            display: block;
        }
    }
}


//需求方需求编辑
.editview{
    width:100%;
    background-color: #fdfdf5;
    border-radius: 4px;
    border: 1px solid $se;
    margin-top: 30px;
    padding: 0px 29px 29px;
    .line32{
        line-height: 32px;
    }
    .line40{
        line-height: 40px;
    }
    .item-li{
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    .btn-list{
        .text{
            font-size: 0;
        }
        .btn{
            width: 68px;
            height: 40px;
            line-height: 38px;
            font-size: 14px;
            margin-right: 20px;
        }
    }
    //联系人
    .linkman{
        font-size: 0 !important;
        .select{
            display: inline-block;
            width: 220px;
            height: 40px;
        }
        .item-input{
            width: 100%;
            height: 100%;
            border-radius: 4px;
            border: solid 1px $borcolor;
            background-color: $sf;
            padding: 0 10px;
        }
        .add-link{
            color: $acolor;
            font-size: 14px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
    //需求标签
    .label-wrapper{
        max-width: 540px !important;
        margin-left: -20px;
        margin-bottom: -20px;
    }
    .form-inner_checkbox label{
        background-color: $sf;
    }
    //需求标题
    .requisition-title{
        width: 300px;
        height: 40px;
        @include borradius(4px);
        border: solid 1px #dddddd;
        padding: 0 10px;
    }
}

//需求信息
.requis-infor{
    .check{
        margin-left: 0 !important;
    }
    //合作模式
    .item-model{
        .radio-wrap{
            margin-right: 50px;
        }
    }
    //产品品类
    .item-category{
        .label,.text{
            line-height: 40px;
        }
        .btn{
            display: none;
            width: 160px;
            height: 40px;
            line-height: 38px;
            font-size: 14px;
        }
        .cate{
            display: none;
            color: $s3;
            font-size: 14px;
        }
        .blue{
            display: none;
            color: $acolor;
            font-size: 14px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
    //设计方案
    .item-design{
        .check-wrapper{
            display: block;
            width: 98px;
            margin-left: 0;
            margin-bottom: 30px;
        }
        .radio-wrap{
            margin-right: 30px;
            &:last-of-type{
                margin-right: 0;
            }
            label{      
                background-color: transparent;
            }
        }
        .view-apper{
            margin-bottom: 30px;
        }
        .view-struct,.view-apper{
            display: none;
            p{
                color: $s3;
                font-size: 14px;
                margin-bottom: 18px;
            }
        }
        .view-struct{
            span{
                color: $s6;
                font-size: 14px;
                margin-right: 20px;
            }
            input{
                width: 200px;
                height: 32px;
                background-color: $sf;
                @include borradius(4px);
                border: solid 1px #dddddd;
                padding: 0 10px;
            }
        }
        .view-project,.view-partner{
            display: none;
        }
    }
    //服务内容
    .item-servicecontent{
        .radio-wrap{
            margin-right: 40px;
        }
    }
    //
    .inputtext{
        width: 520px;
        height: 40px;
        color: $s3;
        font-size: 14px;
        border: 1px solid $borcolor;
        @include borradius(4px);
        padding: 0 10px;
    }
    textarea{
        width: 520px;
        height: 100px;
        color: $s3;
        font-size: 14px;
        border: 1px solid $borcolor;
        @include borradius(4px);
        padding: 10px;
        resize: none;
    }
    //产品资料
    .item-file{
        .btn{
            width: 160px;
            height: 40px;
            line-height: 38px;
            font-size: 14px;
            .iconfont{
                margin-right: 8px;
            }
        }
    }
    .file-li{
        position: relative;
        width: 520px;
        height: 60px;
        line-height: 40px;
        background-color: $se;
        @include borradius(4px);
        margin-top: 20px;
        padding: 10px 20px;
        overflow: hidden;
        .file-pro{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,160,233,.2);
        }
        .file-type{
            position: relative;
            float: left;
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: $sf;
            font-size: 13px;
            @include borradius(4px);
            background-color: $acolor;
            text-align: center;
        }
        .file-name{
            position: relative;
            float: left;
            width: 260px;
            height: 40px;
            color: $s3;
            font-size: 14px;
            margin-left: 20px;
            @include textoverflow;
        }
        .btnlist{
            position: relative;
            float: right;
            .iconfont{
                color: $s9;
                font-size: 14px;
                margin-left: 20px;
                cursor: pointer;
                &:hover{
                    color: $acolor;
                }
            }
        }
    }
}




//table
.table{
    width: 100%;
    .width100{
        width: 100px;
    }
    .width180{
        width: 180px;
    }
    .width240{
        width: 240px;
    }
    .list-header{
        display: table-row;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: $s6;
        text-align: center;
        background-color: #f5f5f5;
        &>div{
            display: table-cell;
        }
    }
    .list-li{
        display: table;
        width: 100%;
        color: $s3;
        font-size: 14px;
        text-align: center;
        border: 1px solid $se;
        border-right: none;
        margin-top: 10px;
        &>div{
            display: table-cell;
            border-right: 1px solid $se;
            padding: 10px;
            vertical-align: middle;
            @include breakall;
        }
        .width240{
            text-align: left;
        }
    }
}




//1.跟进信息
.follow-view{
    margin-top: 20px;
    .input{
        width: 580px;
        height: 30px;
        border: 1px solid $borcolor;
        @include borradius(4px);
        padding-left: 10px;
        padding-right: 10px;
    }
    form{
        margin-top: 20px;
        margin-bottom: 20px;
    }
}



//2.财务记录
.finance-view{
    margin-top: 20px;
    .width80{
        width: 80px;
    }
    .width90{
        width: 90px;
    }
    .width120{
        width: 120px;
    }
    .width140{
        width: 140px;
    }
    .width220{
        width: 220px;
    }
    .text-left{
        text-align: left;
        padding: 10px 20px !important;
    }
    .blue{
        cursor: pointer;
    }
    .img-wrapper{
        position: relative;
        width: 80px;
        height: 40px;
        margin: auto;
        cursor: pointer;
        overflow: hidden;
        .watch{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            width: 100%;
            height: 100%;
            line-height: 40px;
            @include transitions(.4s);
            color: $sf;
            background-color: rgba(0,0,0,.5);
            text-align: center;
        }
        &:hover .watch{
            display: block;
        }
        img{
            width: 100%;
        }
    }
    .li-header{
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        border: 1px solid $se;
        border-bottom: 0;
        margin-top: 10px;
        .header-div{
            float: left;
            width: 50%;
            color: $s9;
            font-size: 14px;
            padding: 0 20px;
        }
    }
    .list-li{
        margin-top: 0;
    }
}
//销售提成
.deduct-view{
    .blue{
        cursor: pointer;
    }
    .input{
        width: 80px;
        height: 20px;
        border: 1px solid $borcolor;
        padding-left: 5px;
        margin-left: 5px;
    }
    .list-li.disable{
        .input{
            border: 0;
        }
    }
    .width160{
        width: 160px;
    }
    .text-left{
        padding: 10px !important; 
        &>div{
            margin-bottom: 8px;
        }
        &>div:last-of-type{
            margin-bottom: 0;
        }
    }
    .view-header{
        margin-top: 40px;
        padding-bottom: 18px;
        border-bottom: 1px solid $se;
        span{
            color: $s3;
            font-size: 16px;
        }
        .time{
            color: $s6;
            font-size: 14px;
            margin-left: 20px;
        }
    }
    //设置提成时间
    .settime{
        display: inline-block;
        margin-left: 20px;
        font-size: 0;
        span{
            color: $s6;
            font-size: 14px;
        }
        input{
            width: 150px;
            height: 30px;
            border: 1px solid $borcolor;
            @include borradius(4px);
            padding: 0 10px;
            font-size: 14px;
            color: $s3;
            @include inputplace($s6);
            margin: 0 10px;
            background-color: transparent;
        }
        .btn{
            width: 60px;
            vertical-align: 1px;
        }
    }
    .view-price{
        margin-top: 18px;
        margin-bottom: 18px;
        span{
            color: $s6;
            font-size: 14px;
            margin-right: 35px;
        }
        .btn{
            background-color: $yelow;
            border-color: $yelow;
        }
    }
}




//3.文件管理
.file-view{
    .file-item{
        
    }
    .item-title{
        color: $s3;
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .file-other{
        height: 30px;
        line-height: 30px;
        .btn-wrapper{
            float: right;
            color: $s6;
            font-size: 12px;
        }
    }
    .li{
        float: left;
        width: 340px;
        border: 1px solid $borcolor;
        @include borradius(4px);
        margin-right: 20px;
        margin-bottom: 20px;
        &:nth-of-type(2n){
            margin-right: 0;
        }
    }
    .file-info{
        width: 100%;
        height: 60px;
        padding: 10px 20px 10px 10px;
        .type{
            float: left;
            width: 40px;
            height: 40px;
            line-height: 40px;
            color: $sf;
            font-size: 12px;
            @include borradius(4px);
            background-color: $acolor;
            text-align: center;
        }
        .text{
            float: left;
            width: 200px;
            margin-left: 10px;
            p{
                color: $s6;
                font-size: 14px;
                @include textoverflow;
            }
            span{
                color: $s9;
                font-size: 12px;
            }
        }
        .iconfont{
            color: $s9;
            font-size: 16px;
            margin-top: 10px;
            @include transitions(.4s);
            &:hover{
                color: $acolor;
            }
        }
    }
    .file-type{
        border-top: 1px solid $borcolor;
        padding:10px;
        p{
            float: left;
            width: 210px;
            height: 20px;
            line-height: 20px;
            @include textoverflow;
            color: $s9;
            font-size: 12px;
        }
        .tlable{
            float: right;
            display: inline-block;
            height: 20px;
            color: $s6;
            font-size: 12px;
            border: 1px solid $borcolor;
            @include borradius(10px);
            padding: 0 10px;
            margin-right: 10px;
        }
    }
}





//4.匹配记录
//4.1意向服务方
.view-inservice{
    .view-title{
        color: $s3;
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .inservice-list{
        width: 100%;
        margin-bottom: 40px;
    }
    .list-item{
        position: relative;
        width: 100%;
        border: 1px solid $borcolor;
        padding: 20px 30px;
        margin-bottom: 10px;
        @include borradius(4px);
        @include transitions(.4s);
        cursor: pointer;
        &:last-of-type{
            margin-bottom: 0;
        }
        &:hover{
            border-color: $acolor;
        }
    }
    .item-header{
        width: 100%;
        height: 40px;
        line-height: 40px;
        .header-label{
            float: left;
            position: relative;
            left: -31px;
            width: 100px;
            font-size: 14px;
            color: #ffffff;
            background-color: $yelow;
            @include borradius(0 15px 15px 0);
            text-align: center;
        }
        .header-text{
            float: right;
            font-size: 14px;
            color: $s6;
            i{
                font-weight: bold;
            }
        }
        .header-info{
            float: left;
            font-size: 0;
            .info-logo{
                display: inline-block;
                width: 40px;
                height: 40px;
                @include borradius(50%);
                overflow: hidden;
                vertical-align: middle;
                img{
                    width: 100%;
                }
            }
            .info-name{
                position: relative;
                font-size: 16px;
                color: #333333;
                margin-left: 10px;
                vertical-align: middle;
            }
        }
        //文字与logo模糊不可见
        .header-info.active{
            .info-name:after{
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                content: '';
                width: 196px;
                height: 20px;
                background: url(../img/demand/spoilertext.png) no-repeat center;
            }
        }
    }
    .item-content{
        .content-left{
            float: left;
        }
        .content-right{
            float: right;
            font-size: 0;
        }
        .label-list{
            font-size: 0;
            margin: 20px 0;
        }
        .span-label{
            display: inline-block;
            width: auto;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: $s3;
            border: 1px solid #dddddd;
            padding: 0 20px;
            margin-right: 10px;
            &:last-of-type{
                margin-right: 0;
            }
        }
        .award-list{
            width: 100%;
            font-size: 0;
            .img-wrap{
                display: inline-block;
                width: 20px;
                height: 20px;
                @include borradius(50%);
                margin-right: 10px;
                overflow: hidden;
            }
            img{
                width: 100%;
            }
        }
        .case-img{
            position: relative;
            display: inline-block;
            width: 80px;
            height: 80px;
            margin-left: 10px;
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        .case-img.nopublic:after{
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            content: ''; 
            width: 40px;
            height: 40px;   
            background: url(../img/demand/icon-nopublic.png) no-repeat center;
        }
    }
    .inservice-btn-wrap{
        width: 100%;
        padding-bottom: 10px;
        .inservice-btn{
            display: block;
            width: 400px;
            height: 40px;
            line-height: 38px;
            border: 1px solid $acolor;
            @include borradius(20px);
            color: $acolor;
            text-align: center;
            margin: 0 auto;
            @include transitions(.8s);
            cursor: pointer;
            &:hover{
                color: $sf;
                background-color: $acolor;
            }
        }
    }
}



//4.2 外观、结构匹配
.view-match{
    margin-top: 40px;
    .match-header{
        height: 50px;
        padding-bottom: 20px;
        border-bottom: 1px solid $se;
        .header-title{
            display: inline-block;
            color: $s3;
            font-size: 16px;
            line-height: 30px;
        }
        .topbtn{
            float: right;
            &:before{
                display: inline-block;
                content: '';
                width: 16px;
                height: 16px;
                background: url(../img/infor/icon-top.png) no-repeat center;
                @include transitions(.4s);
                vertical-align: -4px;
                margin-right: 8px;
            }
            &:hover:before{
                background-image: url(../img/infor/icon-top-active.png);
            }
        }
        .topbtn.hactive{
            &:before{
                @include transformt(rotate(-180deg));
            }
        }
    }
    .match-list{
        margin-bottom: 30px;
    }
    .item{
        position: relative;
        margin-top: 20px;
        border: 1px solid $borcolor;
        @include borradius(4px);
        padding: 20px 30px;
        .selectbtn{
            position: absolute;
            top: 30px;
            right: 30px;
        }
        //选定服务方
        &.active{
            border-color: $acolor;
            &:after{
                position: absolute;
                top: -1px;
                right: -1px;
                display: block;
                content: '';
                width: 60px;
                height: 60px;
                background: url(../img/demand/icon-select.png) no-repeat center;
            }
            .selectbtn{
                display: none;
            }
        }
    }
    .item-title{
        color: $s3;
        font-size: 14px;
        line-height: 16px;
    }
    .item-center{
        font-size: 0;
        line-height: 16px;
        margin-top: 18px;
        margin-bottom: 5px;
        .time{
            color: $s9;
            font-size: 14px;
        }   
        .price{
            color: $s6;
            font-size: 14px;
            margin-left: 30px;
        }
        .yelow{
            font-size: 16px;
        } 
    }
    .item-bottom{
        height: 30px;
        line-height: 30px;
        span{
            color: $s6;
            font-size: 14px;
            margin-right: 30px;
        }
        .iconfont{
            color: $sc;
            font-size: 16px;
            margin-right: 10px;
        }
        .btn{
            float: right;
        }
    }
}


//支付诚意金弹窗
.win-payment{
    .content-center{
        text-align: center;
        padding-bottom: 30px;
    }
    .center-text{
        color: $s3;
        font-size: 16px;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .btnlist{
        font-size: 0;
        .nopay{
            color: $s9;
            font-size: 14px;
            line-height: 34px;
            border: 1px solid $s9;
            margin-left: 40px;
        }
    }
}





//评分记录
.grade-view{
    .grade-title{
        line-height: 16px;
        color: $s9;
        font-size: 14px;
        margin: 20px 0;
    }
    .grade-li{
        border: 1px solid $borcolor;
        @include borradius(4px);
        padding: 20px 30px;
        margin-bottom: 20px;
    }
    //
    .li-left{
        float: left;
        .li-title{
            color: $s3;
            font-size: 14px;
            margin-bottom: 18px;
        }
        .li-star{
            font-size: 0;
            line-height: 14px;
            margin-bottom: 24px;
            &:last-of-type{
                margin-bottom: 0;
            }
        }
        span{
            display: inline-block;
            width: 100px;
            color: $s6;
            font-size: 12px;
            padding-right: 10px;
            vertical-align: middle;
        }
        .score-text{
            color: $s3;
            text-align: center;
        }
        //已评分
        .star-list{
            display: inline-block;
            vertical-align: middle;
        }
        .li-star.watch{
            margin-bottom: 14px;
            &:last-of-type{
                margin-bottom: 0;
            }
        }
        .iconfont{
            color: $borcolor;
            font-size: 14px;
            margin-right: 10px;
            vertical-align: middle;
        }
        .iconfont.active{
            color: $yelow;
        }
    }
    .li-right{
        float: right;
        // 未评分
        textarea{
            display: block;
            width: 310px;
            height: 90px;
            color: $s3;
            font-size: 12px;
            border: 1px solid $borcolor;
            @include borradius(4px);
            padding: 8px 10px;
            margin-top: 35px;
            @include inputplace($s9);
            resize: none;
        }
        .btn{
            float: right;
            margin-top: 20px;
        }
        // 已评分
        .li-time{
            color: $s9;
            font-size: 12px;
            text-align: right;
            margin-bottom: 10px;
        }
        .li-state{
            width: 320px;
            color: $s6;
            font-size: 12px;
            line-height: 20px;
            margin-top: 16px;
        }
    }
}




//评分星星效果
.star-bg{
    display: inline-block;
    position: relative;
    width: 120px; 
    height: 14px;
    background: url(../img/list/star.png) repeat-x;
    overflow: hidden;
    vertical-align: middle;    
    &:hover{
        .star,.score:checked + .star{  
            background-image: none;
        }
    }
    .star{
        position: absolute;
        width: 24px;
        height: 100%;
        z-index: 3;
        transition: background-image .4s;
        &:hover{
            background: url(../img/list/star.png) repeat-x 0 -14px!important;
            left: 0; 
            z-index: 2;
        }
    }
    .star_1 { left: 0; }
    .star_2 { left: 24px; }
    .star_3 { left: 48px; }
    .star_4 { left: 72px; }
    .star_5 { left: 96px; }
    .star_1:hover { width: 24px; }
    .star_2:hover { width: 48px; }
    .star_3:hover { width: 72px; }
    .star_4:hover { width: 96px; }
    .star_5:hover { width: 120px; }

    label { 
        display: block; 
        _display:inline;
        height: 100%; 
        width: 100%;
        font-size: 0;
        cursor: pointer;
    }
    
    /* 幕后的英雄，单选按钮 */
    .score { 
        position: absolute; 
        clip: rect(0 0 0 0);
    }
    .score:checked + .star{
        background: url(../img/list/star.png) repeat-x 0 -14px;
        left: 0; 
        z-index: 1;
    }

    .score_1:checked ~ .star_1 { width: 24px; }
    .score_2:checked ~ .star_2 { width: 48px; }
    .score_3:checked ~ .star_3 { width: 72px; }
    .score_4:checked ~ .star_4 { width: 96px; }
    .score_5:checked ~ .star_5 { width: 120px; } 
}



//评分弹窗
.win-grade{
    .li-star{
        font-size: 0;
        line-height: 14px;
        margin-bottom: 30px;
        span{
            display: inline-block;
            width: 190px;
            color: $s6;
            font-size: 14px;
            vertical-align: middle;
        }
        .score-text{
            width: 80px;
            color: $s3;
        }
    }
    .state{
        textarea{
            width: 100%;
            height: 100px;
            font-size: 14px;;
            color: $s3;
            border: 1px solid $borcolor;
            @include borradius(4px);
            padding: 6px 10px;
            @include inputplace($s9);
            resize: none;
            margin-bottom: 10px;
        }
        p{
            font-size: 12px;
        }
    }
    .last-item{
        margin-top: 30px;
        text-align: center;
    }
    .btn{
        width: 160px;
        height: 36px;
        line-height: 36px;
    }
    .star-bg{
        width: 220px;
        height: 24px;
        background-image: url(../img/list/star24.png);
        &:hover{
            .star,.score:checked + .star{  
                background-image: none;
            }
        }
        .star{
            width: 44px;
            &:hover{
                left: 0;
                background: url(../img/list/star24.png) repeat-x 0 -24px!important;
            }
        }
        .star_1 { left: 0; }
        .star_2 { left: 44px; }
        .star_3 { left: 88px; }
        .star_4 { left: 132px; }
        .star_5 { left: 176px; }
        .star_1:hover { width: 44px; }
        .star_2:hover { width: 88px; }
        .star_3:hover { width: 132px; }
        .star_4:hover { width: 176px; }
        .star_5:hover { width: 220px; }

        .score:checked + .star{
            background: url(../img/list/star24.png) repeat-x 0 -24px;
        }

        .score_1:checked ~ .star_1 { width: 44px; }
        .score_2:checked ~ .star_2 { width: 88px; }
        .score_3:checked ~ .star_3 { width: 132px; }
        .score_4:checked ~ .star_4 { width: 176px; }
        .score_5:checked ~ .star_5 { width: 220px; } 
    }
}